<template>
	<view class="container">
		<view class="formBox">
			<u--form labelPosition="top" labelWidth="auto" :model="model" :rules="rules" ref="form">
				<u-form-item label="真实姓名:" prop="name" borderBottom>
					<u--input :disabled="login_user" disabledColor="#ffffff" v-model="model.name" placeholder="请输入用户真实姓名" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="身份证号:" prop="identity_card" borderBottom>
					<u--input :disabled="login_user" disabledColor="#ffffff" @change="changeIdentityCard" v-model="model.identity_card"
						placeholder="请输入身份证号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="用户类型:" prop="usertype_name" borderBottom @click="opneChangeUserType()">
					<u--input v-model="model.usertype_name" disabled  disabledColor="#ffffff" placeholder="请选择用户类型"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="性别:" prop="sex_name" borderBottom @click="opneChangeSex()">
					<u--input v-model="model.sex_name" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="手机号:" prop="phone" borderBottom>

					<u--input :disabled="login_user" disabledColor="#ffffff" v-model="model.phone" placeholder="请输入手机号" border="none">
					</u--input>
					<!-- <u-button slot="right" type="success" size="mini" text="自动填写"></u-button> -->
				</u-form-item>
				<u-form-item label="生日:" prop="birthday" borderBottom @click="opneChangeData()">
					<u--input v-model="model.birthday" disabled disabledColor="#ffffff" placeholder="请选择出生日期"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<u-gap height="64"></u-gap>
			<template v-if="btn_state === 0">
				<u-button type="primary" text="提交" @click="submit"></u-button>
			</template>
			<template v-else-if="btn_state === 1">
				<u-button type="primary" text="编辑个人信息" @click="openEdit"></u-button>
			</template>
			<template v-else-if="btn_state === 2">
				<view class="formBtn2">
					<u-button style="margin:0 16rpx;" type="error" text="修改" @click="submit"></u-button>
					<u-button style="margin:0 16rpx;" type="primary" text="取消" @click="cancelEdit"></u-button>
				</view>
			</template>

			<u-gap height="16"></u-gap>
		</view>
		<!-- 性别 -->
		<u-picker @close="sex_show = false;" @cancel="sex_show = false;" :closeOnClickOverlay="true"
			@confirm="getSexConfirm" :show="sex_show" :columns="sex_columns" keyName="name">
		</u-picker>
		<!-- 出生日期 -->
		<u-datetime-picker :minDate="min_data" @close="date_show = false;" @cancel="date_show = false;"
			:closeOnClickOverlay="true" @confirm="getDateConfirm" :show="date_show" v-model="date_birthday" mode="date">
		</u-datetime-picker>
		<!-- 用户类型 -->
		<u-picker @close="usertype_show = false;" @cancel="usertype_show = false;" :closeOnClickOverlay="true"
			@confirm="getUserTypeConfirm" :show="usertype_show" :columns="userTypeList" keyName="dictLabel">
		</u-picker>
		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<script>
	import api from "@/api/api.js"
	import {
		mapActions,
		mapState,
		mapMutations
	} from "vuex"
	export default {
		name: '',
		components: {},
		data() {
			return {
				loading: false,
				// 用户已登录
				login_user: true,
				// 按钮状态
				btn_state: 0, //0 注册提交,1 编辑  , 2 修改,取消 
				myCode: 10001, //用户状态

				min_data: new Date(1900, 0, 1).getTime(),
				model: {
					name: null, //真实姓名
					identity_card: null, //请输入身份证号
					sex: null, //性别值
					sex_name: null, //性别
					phone: null, //手机号
					birthday: null, //生日
					usertype: null, //用户类型
					usertype_name: null
				},
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '用户真实姓名不能为空',
						trigger: ['blur', 'change']
					}, {
						pattern: /^([\u4e00-\u9fa5·]{2,16})$/,
						// 正则检验前先将值转为字符串
						transform(value) {

							return String(value);
						},
						message: '请输入中文姓名'
					}],
					identity_card: [{
							type: 'string',
							required: true,
							message: '身份证号不能为空',
							trigger: ['blur', 'change']
						},
						// 正则判断
						{
							pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请输入身份证号'
						},
					],
					phone: [{
						type: 'string',
						required: true,
						message: '联系电话不能为空',
						trigger: ['blur', 'change']
					}, {
						pattern: /^((\+|00)86)?1[3-9]\d{9}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请输入正确手机号'
					}],
					sex_name: [{
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					}],
					usertype_name: [{
						type: 'string',
						required: true,
						message: '请选择用户类型',
						trigger: ['blur', 'change']
					}],
					birthday: [{
						type: 'string',
						required: true,
						message: '请选择出生日期',
						trigger: ['blur', 'change']
					}],
				},
				sex_show: false,
				sex_columns: [
					[{
							name: "男",
							value: 0,
						},
						{
							name: "女",
							value: 1,
						},

						{
							name: "未知",
							value: 2,
						}
					],
				],

				date_show: false,
				date_birthday: Number(new Date()),

				userTypeList: [],
				usertype_show: false,
			}
		},
		created(e) {
			this.getUserType()

		},
		onLoad(e) {
			console.log('onLoad', e.login_user)
			this.login_user = e.login_user == 1 ? true : false;
			this.myCode = e.myCode == 10000 ? 10000 : 10001;
		},
		mounted() {},
		destroyed() {},
		methods: {

			getUserInfo() {
				this.btn_state = this.login_user ? 1 : 0
				if (!this.login_user) return;
				let userInfo = uni.getStorageSync("userInfo")

				let model = {
					id: userInfo.id,
					name: userInfo.username, //真实姓名
					identity_card: userInfo.identityCard, //请输入身份证号
					sex: userInfo.sex, //性别值
					sex_name: this.sex_columns[0][userInfo.sex].name, //性别
					phone: userInfo.phonenumber, //手机号
					birthday: userInfo.birthday, //生日
					usertype: userInfo.type, //用户类型
					usertype_name: this.userTypeList[0][userInfo.type].dictLabel
				}
				this.model = model;
			},
			openEdit() {
				this.loading = true
				setTimeout(() => {
					this.btn_state = 2;
					this.login_user = false;
					this.loading = false
				}, 300)
			},

			cancelEdit() {
				this.loading = true
				setTimeout(() => {
					this.btn_state = 1;
					this.login_user = true
					this.loading = false
				}, 300)

			},
			// 获取个人信息--id
			getUserInfoById() {
				let data = {
					id: this.model.id
				}
				api.getUserInfoById(data).then(res => {
					if (res.data.code == 200) {
						uni.setStorageSync('userInfo', res.data.data)
					}
				}).catch(err => {
					console.log(err)
				})
			},

			// 输入省份证获取性别生日信息
			changeIdentityCard(e) {
				const that = this;
				if (e.length === 18) {
					let sex = this.getsex(e)
					let birthday = this.getBirthday(e)
					console.log('sex', sex, 'birthday', birthday)
					that.model.sex_name = that.sex_columns[0][sex].name
					that.model.sex = sex;
					that.model.birthday = birthday;
					that.date_birthday = new Date(birthday).getTime();

				}
			},
			async submit() {
				const that = this;
				this.$refs.form.validate().then(res => {
					
					let wxUserInfo = uni.getStorageSync("wxUserInfo")
					let data = {
						"avatar": wxUserInfo.headImgUrl, //头像
						"birthday": that.model.birthday, //生日			
						"identityCard": that.model.identity_card, //身份证id
						"nickname": wxUserInfo.nickname, //用户昵称					
						"phonenumber": that.model.phone, //手机号
						"sex": that.model.sex, //性别
						"type": that.model.usertype, //用户类型,
						"username": that.model.name, //用户真实姓名不能为空
						"weixinOpenid": wxUserInfo.openId //微信Openid
					}
					this.loading = true
					if (that.btn_state === 2) {
						data.id = that.model.id;
						// 编辑修改个人信息
						api.getUserEdit(data).then(rese => {
							console.log('getUserEdit', rese)
							that.getUserInfoById()
							this.btn_state = 1;
							this.login_user = true
							setTimeout(() => {
								this.loading = false
							}, 300)

						}).catch(erre => {
							console.log(erre)
						})
					} else if (that.btn_state === 0) {
						// 注册用户信息
						api.getUserAdd(data).then(resadd => {
							console.log('getUserAdd', resadd)
							if (resadd.data.code == 200) {
								uni.setStorageSync('userInfo', resadd.data.data)
								console.log('myCode',that.myCode)
								if (that.myCode == 10000) {
									this.loading = false
									if (that.model.usertype == 0) {
										uni.$u.toast('注册成功,请前往完善房屋信息')
									} else {
										uni.$u.toast('注册成功,欢迎使用')
									}
									
									setTimeout(()=>{
										uni.$u.route({
											type:"switchTab",
											url: '/pages/my/index',
										})
									},300)
									
								}
							}


						}).catch(err => {
							console.log(err)
						})
					}
					console.log('model', this.model, data)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 开启选择性别
			opneChangeSex() {
				if (this.login_user) return;
				this.sex_show = true;
			},
			// 选择性别
			getSexConfirm(e) {
				console.log(e)
				this.model.sex = e.value[0].value;
				this.model.sex_name = e.value[0].name;
				this.sex_show = false
			},
			// 选择日期
			opneChangeData() {
				if (this.login_user) return;
				this.date_show = true;
			},
			getDateConfirm(e) {
				this.date_birthday = e.value
				this.model.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.date_show = false;
			},
			// 获取用户类型
			getUserType() {
				let data = {
					dictType: "user_type"
				}
				api.getSystemUserType(data).then(res => {
					if (res.data.code == 200) {
						this.userTypeList = [];
						this.userTypeList.splice(0, 1, res.data.data);
						this.getUserInfo()
					}

				}).catch(err => {
					console.log(err)
				})
			},
			// 开启获取用户类型
			opneChangeUserType() {
				if (this.login_user) return;
				this.usertype_show = true
			},
			// 获取用户类型
			getUserTypeConfirm(e) {
				console.log(e)
				this.model.usertype = e.value[0].dictValue;
				this.model.usertype_name = e.value[0].dictLabel;
				this.usertype_show = false
			},
			getBirthday(psidno) {
				var birthdayno, birthdaytemp
				if (psidno.length == 18) {
					birthdayno = psidno.substring(6, 14)
				} else if (psidno.length == 15) {
					birthdaytemp = psidno.substring(6, 12)
					birthdayno = "19" + birthdaytemp
				} else {
					return "";
				}
				var birthday = birthdayno.substring(0, 4) + "-" + birthdayno.substring(4, 6) + "-" + birthdayno.substring(
					6, 8)
				return birthday
			},
			getsex(psidno) {
				var sexno, sex
				if (psidno.length == 18) {
					sexno = psidno.substring(16, 17)
				} else if (psidno.length == 15) {
					sexno = psidno.substring(14, 15)
				} else {
					return "";
				}
				var tempid = sexno % 2;
				if (tempid == 0) {
					sex = 1
				} else {
					sex = 0
				}
				return sex
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: calc(100% - 32rpx);
		padding: 0 16rpx;
	}

	.formBox {
		width: calc(100% - 64rpx);
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;

		.formBtn2 {
			width: 100%;
			display: flex;
			justify-content: space-around;
		}

		.formline {
			display: flex;
			width: 100%;
			color: rgb(192, 196, 204);
		}

		.formlinesex {
			display: flex;
			width: 100%;
			color: #333333;
		}
	}
</style>
